<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-23 13:36:46
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2023-10-24 16:48:18
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\formModel\electronicForms\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="registrationForm">
    <div class="topBtn">
      <div style="display: flex">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="background: #2f54eb"
          @click="() => handleOperate()"
          >新增</el-button
        >
        <el-button
          icon="el-icon-delete"
          @click="() => handleDelete()"
          :disabled="!multipleSelection.length"
          type="danger"
          >删除</el-button
        >
      </div>
      <el-input
        placeholder="请输入关键字"
        v-model="queryParams.name"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          type="primary"
          style="background: #2f54eb"
          @click="getList"
        ></el-button>
      </el-input>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        size="mini"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="表单名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="formCode" label="表单标识" align="center">
        </el-table-column>
        <el-table-column prop="" label="PC端地址" align="center">
        </el-table-column>
        <el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="scope"
            ><div>
              <el-button type="text" @click="() => handleOperate(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="() => handleDelete(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "registrationForm",
  dicts: ["pt_app_entity_status"],
  props: {
    appId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      total: 0,
      queryParams: { name: undefined, pageNum: 1, pageSize: 10 },
      multipleSelection: [],
      tableData: [{}],
      row: {},
      open: false,
      loading: false,
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.registrationForm {
  .topBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ::v-deep .input-with-select {
      width: 300px;
    }
    ::v-deep .el-icon-search {
      color: #fff;
    }
  }
  .table {
    margin-top: 20px;
  }
  .pagination {
    height: 50px;
  }
}
</style>
